<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue路由开发-vue-router</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <router-link to="/login">展示登录组件</router-link>
        <router-link to="/login" tag="button">展示登录组件</router-link>
        <router-link to="/register">展示注册组件</router-link>
        <router-link to="/userList">展示用户列表组件</router-link>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <!-- 登录组件 -->
    <template id="login">
        <div>
            <h2>登录组件</h2>
            <input type="text" placeholder="请输入用户名"></input>
            <input type="password" placeholder="请输入密码"></input>
            <button>登录</button>
        </div>
    </template>
    <!-- 注册组件 -->
    <template id="register">
        <div>
            <h2>注册组件</h2>
            <input type="text" placeholder="请输入用户名"></input>
            <input type="password" placeholder="请输入密码"></input>
            <button>登录</button>
        </div>
    </template>
    <!-- 用户列表组件 -->
    <template id="userList">
        <div>
            <h2>用户列表组件</h2>
            <button>添加用户</button>
            <ul>
                <li v-for="user in users">
                    {{user.name}}
                </li>
            </ul>
        </div>
    </template>
</body>

</html>
<script type="module">
    import { } from './js/vue.js'
    import { } from './js/vue-router.js'

    let login = { template: '#login' }
    let register = { template: '#register' }
    let userList = {
        template: '#userList',
        data() {
            return {
                users: [
                    { name: '张三' },
                    { name: '李四' },
                    { name: '王五' },
                ]
            }
        }
    }

    //创建路由规则
    let routes = [
        // 默认路由 展示用户列表组件
        // { path: '/', component: userList },
        // 第二种写法： 通过redirect(重定向)属性跳转到用户列表组件  推荐使用
        { path: '/', redirect: '/userList' },
        { path: '/login', component: login },
        { path: '/register', component: register },
        { path: '/userList', component: userList },
    ];

    //创建路由对象
    let router = new VueRouter({
        routes
    });

    let app = new Vue({
        el: '#app',
        data: {
            msg: 'vue路由开发'
        },
        router, //挂载路由对象
    })
</script>